<template>
  <div class="detail">
    <div class="detail-top">
      <img :src="activityDetail.img_url" @click="navigaToOrganizerIntro(activityDetail.active_party_id)">
    </div>
    <div class="title">活动名称：{{activityDetail.name}}</div>
    <div class="detail-info">
      <div class="detail-time detai-list-public">
        <span class="detail-date-box">
          <i class="detail-icon detail-icon-public"></i>
          <span class="detail-date">{{activityDetail.start_time}} 至 {{activityDetail.end_time}}</span>
        </span>
      </div>
      <div class="detail-dress detai-list-public" @click="position">
        <div class="detail-dress-info">
          <i class="detail-dress-icon detail-icon-public"></i>
          <span>{{activityDetail.province + activityDetail.city + activityDetail.area + activityDetail.address_detail}}</span>
        </div>
        <i class="shell-right icon-iconfont-platform-entrance"></i>
      </div>
      <div class="detail-start detai-list-public">
          <i class="detail-icon detail-icon-public"></i>
          <span class="detail-start-time">{{differTimeStr}}</span>
      </div>
    </div>
    <div class="detail-middle">
      <div class="detail-middle-tab">
        <div class="activity-intro" :class="{active:tabIndex == 1}" @click="changeIndex(1)">活动详情</div>
        <div class="activity-ready" :class="{active:tabIndex == 2}" @click="changeIndex(2)">活动准备</div>
        <div class="activity-review" v-if="differTimeStr == '该活动已经结束' " :class="{active:tabIndex == 3}" @click="changeIndex(3)">活动回顾</div>
        <div class="activity-recommend" :class="{active:tabIndex == 4}" @click="changeIndex(4)" v-if="activityDetail.show_goods == '1' || activityDetail.show_advert == '1'"  >好物推荐</div>
      </div>
      <div class="activity-intro-content" v-if="tabIndex == 1">
        <p class="detail-middle-content">
          <div v-if="activityDetail.type == 'pc'">
            <wxParse :content="activityDetail.detail"/>
          </div>
          <div v-if="activityDetail.type == 'app'" >
            <text style="font-size:14px;line-height:20px">{{activityDetail.app_detail}}</text>
            <div v-for="(imgUrl,index) in activityDetail.activity_info_img_list" :key="index">
              <img :src="imgUrl" mode="widthFix" style="width:100%">
            </div>
          </div>
        </p>
        <!-- <div class="all" @click="navigateToIntro">全文</div> -->
      </div>
      <div class="activity-ready-content" v-if="tabIndex == 2">
        <text class="detail-middle-content">
          {{activityDetail.desc}}
        </text>
      </div>
      <div class="activity-review-content" v-if="tabIndex == 3">
        <video id="activityVideo" style="width:100%;height:450rpx" :src="activityDetail.video_url" controls></video>
        <p class="detail-middle-content">
          <text v-if="activityDetail.review">{{activityDetail.review}}</text>
          <text v-else style="font-size:14px;padding:20rpx">活动方还没有编写活动回顾</text>
        </p>
      </div>
      <div class="activity-review-content" v-if="tabIndex == 4">
        <div class="detail-middle-content">
          <div class="shop-promotion">
            <text v-if="!shopListData">
              呃呃,下次再给你推介哦!
            </text>
            <shop-list v-if="shopListData" :shopListData="shopListData"/>
          </div>
          <div class="news-banner" v-if="activityDetail.show_advert == 1" @click="navigaToTeamwork"><img :src="activityDetail.advert_img_url" alt=""></div>
        </div>
      </div>
    </div>
    <div class="detail-bottom" v-if="differTimeStr == '该活动已经结束'">
      <div class="sign-up-ed">该活动已经结束</div>
    </div>
    <div class="detail-bottom" v-else>
      <div class="invite" @click="navigateToInvitation">邀请卡</div>
      <div class="sign-up-ed" v-if="activityDetail.is_join == 1">该活动您已报名</div>
      <div class="sign-up" v-else @click="navigateToRegister">报名</div>
    </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import shopList from './../../components/shopList.vue'
import { getActivityDtail } from '../../api/index.js'
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'

export default {
  data(){
    return {
      activityDetail: {},
      activityId: '',
      differTimeStr: '', //距离活动开始时间
      timer: null, //存储定时器
      tabIndex: 1,//
      shopListData: null,
      videoContext: null,
      indicatorDots: false,//控制banner导航标点显示
    }
  },
  components:{
    wxParse,
    shopList
  },
  onLoad(option) {
    if(option.modal){
      this.activityId = option.id;
      this.reqActivityDetail(option.id);
      var This = this;
      wx.showModal({
        title: '报名成功',
        content: "你可在个人中心'我参与的活动'中查看",
        confirmText: '取消',
        confirmColor: '#ccc',
        cancelText: '分享好友',
        cancelColor: '#576B95',
        success(res) {
          if (res.confirm) {
          }else if (res.cancel) {
            This.navigateToInvitation();
          }
        }
      })
    }else{
      this.activityId = option.id;
      this.reqActivityDetail(option.id);
    }
  },
  onReady(){
    // this.videoContext = wx.createVideoContext('activityVideo')
  },
  methods:{
    //banner滑动
    // swiperChange(e){
    //   if(e.mp.detail.current == 1){//控制banner导航标点显示
    //     this.indicatorDots = false;
    //   }else{
    //     this.indicatorDots = true;
    //   }
    //   this.videoContext.pause();
    // },
    //跳转到报名页面
    navigateToRegister(){
      var userToken = wx.getStorageSync('userToken');
      if(!userToken){
        wx.showToast({
          title: '请先授权登陆',
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.navigateTo({
            url: "/pages/login/main"
          })
        },1000)
      }else{
        wx.redirectTo({
          url: '/pages/register/main?activity_id='+ this.activityDetail.id + '&cost=' + this.activityDetail.cost
        })
      }
    },
    //跳转到邀请卡页面
    navigateToInvitation(){
      var userToken = wx.getStorageSync('userToken');
      if(!userToken){
        wx.showToast({
          title: '请先授权登陆',
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.navigateTo({
            url: "/pages/login/main"
          })
        },1000)
      }else{
        wx.navigateTo({
          url: '/pages/invitation/main?id='+ this.activityId
        })
      }
    },
    //跳转到活动详情介绍页面
    navigateToIntro(){
      wx.navigateTo({
        url: '/pages/intro/main?id='+ this.activityId
      })
    },
    //通过传递过来的参数获取活动数据
    async reqActivityDetail(id){
      var userToken = wx.getStorageSync('userToken');
      let parmas = { 
        activity_id: id,
        user_token: userToken 
      };
      let res = await getActivityDtail(parmas);
      if(res.data.level == "success"){
        this.activityDetail = res.data.data
        this.shopListData = res.data.data.goods_list;
        if(this.activityDetail.video_url){//控制banner导航标点显示
          this.indicatorDots = true;
        }else{
          this.indicatorDots = false;
        }
        this.overTime();
      }else{
        wx.showToast({
          title: '获取内容失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //计算活动距离开始还有多长时间
    overTime(){
      let startTime = new Date(this.activityDetail.start_time.replace(/-/g, '/')).getTime();
      let endTime = new Date(this.activityDetail.end_time.replace(/-/g, '/')).getTime();
      let nowTime = new Date().getTime();
      let differTime = startTime - nowTime;
      let differENDTime = endTime - nowTime;
      let day = Math.floor(differTime / 1000 / 3600 / 24);  // 计算天数
      let hours = Math.floor((differTime % (1000 * 3600 * 24)) / 1000 / 3600); // 计算小时数
      let minutes = Math.floor(differTime % (1000 * 3600) / 1000 / 60 ); // 计算距离开始分钟数
      if(minutes <= 0 && differENDTime > 0){
        this.differTimeStr = '该活动正在进行中';
      }else if(differENDTime <= 0 ){
        this.differTimeStr = '该活动已经结束';
      }else{
        this.differTimeStr = day +'天'+ hours +'小时'+ minutes +'分钟开始';
      }
    },
    //利用腾讯地图sdk中文定位
    position(){
      //实例化
      var position_map = new QQMapWX({
        key: 'DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2' //开发者key
      })
      //合并地址
      let address = this.activityDetail.province + this.activityDetail.city + this.activityDetail.area + this.activityDetail.address_detail;
      position_map.geocoder({
        address,
        success: function (res) {
          let latitude = res.result.location.lat;
          let longitude = res.result.location.lng;
          wx.openLocation({
            latitude,
            longitude,
            scale: 18,
            name: address,
          })
        },
        fail: function (res) {
          console.log(res);
        },
      })
    },
    //跳活动方详情页面
    navigaToOrganizerIntro(Id){
      wx.navigateTo({
        url: '/pages/organizerIntro/main?id='+Id
      })
    },
    //改变选项卡index
    changeIndex(index){
      this.tabIndex = index;
    },
    //跳转到填写合作意向页面
    navigaToTeamwork(){
      wx.navigateTo({
        url: '/pages/teamwork/main'
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  @import url("~mpvue-wxparse/src/wxParse.css");
  .detail
    width 100%
    height 100vh
    padding-bottom 120rpx
    background-color #f1f1f1
    position relative
    .title
      width 100%
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
      height 60rpx
      line-height 60rpx
      background #fff
      margin-top 10rpx
      padding 0 20rpx 20rpx
      font-size 14px
    .detail-top
      width 100%
      height 450rpx
      img
        width 100%
        height 100%
    .detail-middle
      width 100%
      background #fff
      margin-top 10rpx
      padding 0 20rpx 20rpx
      .detail-middle-tab
        display flex
        justify-content flex-start
        align-items center
        font-size 14px
        div
          color #333
          margin-left 20rpx
          padding 10rpx
        .activity-intro
          margin-left 0
          padding-left 0
        .active
          color #000
          font-weight bold 
          border-bottom 3px solid #666
      &>div
        width 100%
        margin-top 16rpx
        line-height 20px
      .detail-middle-content
        width 100%
        font-size 12px
        color #333333
        .shop-promotion
          border-top 20rpx #f1f1f1 solid
          width 100%
          padding 20rpx
          position relative
          .shop-promotion-top
            display flex
            padding-bottom 20rpx
            .vertical
              width 6rpx
              height 28rpx
              background-color black
            .shop-promotion-title
              font-size 15px
              margin-left 10rpx
              font-weight 600
        .news-banner
          width 100%
          height 180rpx
          position relative
          img
            width 100%
            height 180rpx
    .detail-info
      width 100%
      margin-top 14rpx
      .detai-list-public
        display flex
        align-items center
        padding 20rpx
        font-size 12px
        color grayscale
        margin-bottom 3rpx
        background #fff
        .detail-icon-public
          width 28rpx
          height 28rpx
          background-repeat no-replace
          background-size 28rpx 28rpx
          background-position center center
          margin-right 8rpx
      .detail-time
        .detail-date-box
          display flex
          justify-content center
          align-items center
          .detail-icon
            background-image url(../../../static/images/time.png)
      .detail-dress
        justify-content space-between
        .detail-dress-info
          display flex
          align-items center
          .detail-dress-icon
            background-image url(../../../static/images/position.png)
        .shell-right
          transform:rotate(-90deg);
      .detail-start
        .detail-icon
          background-image url(../../../static/images/time.png)
  .detail-bottom
    width 100%
    height 80rpx
    line-height 80rpx
    color #fff
    font-size 15px
    text-align center
    position fixed
    bottom 0
    left 0
    display flex
    justify-content center
    align-items center
    .invite
      flex 1
      background-color #cccccc
      &:active
        background-color #888888 
    .sign-up
      flex 1
      background-color #bbbbbb
      &:active
        background-color #888888
    .sign-up-ed
      flex 1
      background-color #bbbbbb    
</style>
